Day 02 HTML/CSS 點擊超連結會經歷的偽類選取器(Pseudo-classes)

2021 iThome 鐵人賽

DAY 2

Modern Web

網頁前後端寶石庫-礦坑補完計畫系列第 2 篇

13th鐵人賽網頁前端網頁前後端寶石庫

阿修

2021-09-17 21:54:29

4402 瀏覽

分享至

根據 MDN，目前 CSS 的偽類選取器有以下這些：

今天要介紹到的是關於點擊超連結後會經歷的五種偽類選取器(紅框內)：

在 style 裡面可以用 a:link、a:hover、a:active、a:focus、a:visited 改變超連結的樣式。

:link
還沒點擊超連結所呈現的樣子。
:hover
鼠標移到超連結後還沒點擊所呈現的樣子。
:active
點擊超連結時所呈現的樣子。
:focus
取得焦點時所呈現的樣子。
:visited
點完超連結後所呈現的樣子。

而 CSS 樣式後面寫的會蓋掉前面的關係，需按照以下順序由上而下來寫，超連結才不會壞掉：
:link > :visited > :focus > :hover > :active

為什麼要按照這樣的順序呢?

因為鼠標在外時，要能顯示 :link 跟 :visited 的狀態。
其中 :visited 要能蓋過 :link 才能顯示出被點擊後的外觀。
所以 :link 要放在 :visited 前面，其他三個則要放在他們後面才不會被蓋住。
再來鼠標移過去點擊後拉開放掉會呈現 :focus，此時鼠標移過去時應該要能呈現 :hover，
所以 :focus 要放在 :hover 前面。
接著同為鼠標移過去的狀態，:hover 會先出來，:active 需要比 :hover 優先被執行，
所以 :hover 要放在 :active 前面。

範例：

這是原本超連結的顏色(:link)：
這是鼠標移到超連結的顏色(:hover)：
這是取得焦點的顏色(:link + :focus)：
(做法是按下鼠標後不要在超連結上放開鼠標，要在其他空白處放開，就可以呈現 focus 的樣式。)
這是點擊超連結的顏色(:active + :focus)：
這是點完超連結的顏色(:visited)：

<body>
  <a href="#">我是超連結</a>
</body>

<style>
  a:link {
    color: orange;
  }
  a:visited {
    color: indigo;
  }
  a:focus {
    background: grey;
  }
  a:hover {
    color: black;
  }
  a:active {
    color: green;
  }
</style>

參考資料：
[1]MDN:虛擬類別（pseudo-class）
[2]常用於超連結的動態僞類選取器 - 讓你網頁互動變豐富